import React,{ Component } from 'react';
import {connect} from 'react-redux';

import { actions } from './_index.js';

import Item from './item';

class View extends Component{
    constructor(props){
        super(props);
    }
    reLists(){
        const { twoData,onRemoveFn } = this.props;
        return twoData.map((val,index)=>{
            // return(
            //     <Item key={index} id={val.id} val={val}/>
            // )
            return (
                <li key={index}>
                    {val.id}-{val.text}-{val.type}
                    <span onClick={()=>{onRemoveFn('删除',val.id)}}>删除</span>
                </li>
            )
        })
    }
    render(){
        const { twoData,onAddFn } = this.props;
        return(
            <React.Fragment>
            {twoData.length!==0?this.reLists():''}
            <input onClick={()=>{onAddFn('点击事件')}} type="button" value="点击"/>
            </React.Fragment>
        )
    }
}
//需要渲染什么数据
//作为函数，mapStateToProps执行后应该返回一个对象
const mapStateToProps = (state)=> {
  return {
      twoData:state.two
  }
  // 冒号之前 自定义数据名称
  // 冒号之后 Store.js 合并拆分时定义的名字
  // state 相当于  最大那个store(一个页面只有一个store)
  // state = {
  //     first:[],
  //     two:{},
  // }
}
//是一个函数，会得到dispatch和ownProps（容器组件的props对象）两个参数。
const mapDispatchToProps = (dispatch, ownProps) => {

    // dispatch({
    //     type:'TODO_ADD',
    //     text:'描述',
    // })
	return {
		onAddFn: (text) => dispatch(actions.add(text)),
		onRemoveFn: (text,id) => dispatch(actions.del(text,id))
	}
    // 冒号之前就是我们定义 事件方法名
    // 同样是挂到Props之上
};









export default connect(mapStateToProps,mapDispatchToProps)(View);
